<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: #000000;
			}
			.box{
				width:500px;
				height: 500px;
/*				background: #444;*/
				margin:100px auto;
			}
			.spinner{
				width:200px;
				height: 200px;
				margin:150px  auto;
				position: relative;
			}
			.spinner-cont{
				width:100%;
				height: 100%;
				position:absolute;
			}
			.cont2{
				transform: rotate(45deg);
				
			}
			/*父子选择器*/
			.cont1>div,.cont2>div{
				width: 20px;
				height: 20px;
				border-radius:50%;
				background:aquamarine;
				position: absolute;
				animation:scale 1.2s infinite ease-in-out;
				
				
			}
			.cir1{
				top: 0px;
				left: 0px;
			}
			.cir2{
				top:0px;
				right: 0px;
				
			}
			.cir3{
				bottom: 0px;
				left: 0px;
				
				
			}
			.cir4{
				bottom: 0px;
				right: 0px;
			}
			@keyframes scale{
				0%,80%,100%{transform:scale(0)}
				40%{
					transform: scale(1.3);
				}
				
			}
			/*派生选择器*/
			.cont2 .cir1{
				animation-delay: -1.1s;
				
			}
			.cont1 .cont2{
				animation-delay: -1s;
				
			}
			.cont2 .cir2{
				animation-delay: -0.9s;
			}
			.cont1 .cir3{
				animation-delay: -0.8s;
			}
			.cont2 .cir3{
				animation-delay: -0.7s;
			}
			.cont1 .cir4{
				animation-delay: -0.6s;
			}
			.cont2 .cir4{
				animation-delay: -0.5s;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="spinner">
				<div class="spinner-cont cont1 ">
					<div class="cir1"></div>
					<div class="cir2"></div>
					<div class="cir3"></div>
					<div class="cir4"></div>
				
			</div>
			<div class="spinner-cont cont2 ">
				<div class="cir1"></div>
				<div class="cir2"></div>
				<div class="cir3"></div>
				<div class="cir4"></div>
				
			</div>
			
			</div>
		</div>
	</body>
</html>
